<template>
  <div class="patient-home">
    <header class="header">
      <div class="header-left">
        <h1>患者工作台</h1>
      </div>
      <div class="header-right">
        <span>欢迎，{{ userStore.currentUser?.name }}</span>
        <el-button type="primary" size="small" @click="handleLogout">退出登录</el-button>
      </div>
    </header>
    
    <div class="content">
      <el-card class="patient-info-card">
        <div class="patient-info">
          <h3>个人信息</h3>
          <div class="info-item">
            <span class="label">姓名：</span>
            <span class="value">{{ userStore.currentUser?.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">ID：</span>
            <span class="value">P-{{ userStore.currentUser?.patientId?.toString().padStart(6, '0') }}</span>
          </div>
        </div>
      </el-card>
      
      <el-card class="patient-actions-card">
        <h3>我的服务</h3>
        <div class="action-buttons">
            <el-button type="primary" size="large" @click="$router.push('/diagnosis-progress')">
              <el-icon><Timer /></el-icon>
              查询诊断进度
            </el-button>
            <el-button type="success" size="large" @click="$router.push('/reports')">
              <el-icon><Document /></el-icon>
              查看诊断报告
            </el-button>
          </div>
      </el-card>
      
      <el-card class="images-card">
        <h3>我的影像</h3>
        <div v-if="loadingImages" class="loading">加载中...</div>
        <el-empty v-else-if="myImages.length === 0" description="暂无影像" />
        <div v-else class="image-list">
          <div v-for="img in myImages" :key="img.id" class="image-item">
            <img :src="imagingStore.getImageUrl(img.filename)" alt="thumb" class="thumb" />
            <div class="meta">
              <div class="name">{{ img.originalname }}</div>
              <div class="time">{{ formatTime(img.uploadTime) }}</div>
            </div>
          </div>
        </div>
      </el-card>
      
      <el-card class="diagnosis-stats-card" v-if="recentDiagnosisCount > 0">
        <h3>最近诊断概览</h3>
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-value">{{ recentDiagnosisCount }}</div>
            <div class="stat-label">最近诊断次数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ pendingDiagnosisCount }}</div>
            <div class="stat-label">待处理诊断</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ completedDiagnosisCount }}</div>
            <div class="stat-label">已完成诊断</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="tips-card">
        <h4>温馨提示</h4>
        <ul>
          <li>您可以随时查询诊断进度和查看历史报告</li>
          <li>已完成的报告支持下载和分享功能</li>
          <li>如有疑问，请联系您的主治医生</li>
          <li>诊断结果仅供参考，请以医生当面诊断为准</li>
        </ul>
      </el-card>
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/user';
import { useImagingStore } from '../stores/imaging';
import { Document, Timer } from '@element-plus/icons-vue';

export default {
  name: 'PatientHome',
  components: { Document, Timer },
  setup() {
    const router = useRouter();
    const userStore = useUserStore();
    const imagingStore = useImagingStore();
    const myImages = ref([]);
    const loadingImages = ref(false);

    const loadMyImages = async () => {
      if (!userStore.currentUser?.patientId) return;
      loadingImages.value = true;
      try {
        myImages.value = await imagingStore.fetchImagesByPatient(userStore.currentUser.patientId);
      } finally {
        loadingImages.value = false;
      }
    };

    const formatTime = (iso) => {
      try { return new Date(iso).toLocaleString(); } catch { return iso; }
    };

    const handleLogout = () => {
      userStore.logout();
      router.push('/login');
    };

    onMounted(() => {
      loadMyImages();
    });

    // 模拟数据
    const recentDiagnosisCount = 0;
    const pendingDiagnosisCount = 0;
    const completedDiagnosisCount = 0;

    return { router, userStore, imagingStore, myImages, loadingImages, loadMyImages, formatTime, handleLogout,
      recentDiagnosisCount, pendingDiagnosisCount, completedDiagnosisCount };
  }
};
</script>
<style scoped>
.images-card .image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.image-item { display: flex; gap: 10px; align-items: center; background: #fff; padding: 8px; border-radius: 6px; }
.thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; background: #f0f2f5; }
.meta .name { font-size: 14px; color: #303133; }
.meta .time { font-size: 12px; color: #909399; }
.loading { color: #909399; }
</style>